<template>
  <layout :showBg="false">
    <template #header>
      <view class="page-head flex flex-a-c">
        <image
          src="../../../assets/images/icons/arrow-right.png"
          class="arrow-left back"
          style="width: 48rpx; height: 48rpx; opacity: 0.9"
          mode="scaleToFill"
          @click="back"
        />
        <text class="fs-36 bold">设置中心</text>
      </view>
    </template>
    <view class="content">
      <view
        @click="jump(item)"
        v-for="(item, index) in list"
        :key="index"
        class="setting-item flex flex-bt"
      >
        <view class="flex flex-a">
          <image
            class="icon"
            :src="require(`../../../assets/images/setting/${item.icon}.png`)"
          ></image>
          <text class="fs-28 c-90">{{ item.name }}</text>
        </view>
        <image
          src="../../../assets/images/icons/arrow-right.png"
          class="arrow-right"
          style="width: 48rpx; height: 48rpx; opacity: 0.5"
          mode="scaleToFill"
        />
      </view>
      <view
        v-if="userInfo.userId"
        @click="logout"
        class="setting-item flex flex-a-c"
      >
        <text class="c-60 fs-32">退出登录</text>
      </view>
    </view>
    <updateApp
      @close="showUpdateModal = false"
      :updateInfo="updateInfo"
      :show="showUpdateModal"
    />
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import updateApp from "../../../compennts/updateApp";

import { getLocalUserInfo, openAppMarket } from "../../../assets/utils/index";
import { getVersion } from "../../../api/mine";

import { version, needUpdateApp } from "../../../assets/utils/version";

export default {
  components: {
    layout,
    updateApp,
  },
  data() {
    return {
      userInfo: {},
      updateInfo: {},
      showUpdateModal: false,
      list: [
        {
          name: "个人信息",
          path: "userinfo",
          icon: "user",
          auth: true,
        },
        {
          name: "修改密码",
          path: "changePwd",
          icon: "pwd",
          auth: true,
        },
        {
          name: "实名认证",
          path: "authen",
          icon: "auth",
          auth: true,
        },
        // {
        //     name:'抖音绑定',
        //     path:'changePwd',
        //     icon:'dy',
        //     auth:true
        // },
        {
          name: "账号注销",
          path: "logoff",
          icon: "logoff",
          auth: true,
        },
        {
          name: "检查更新",
          path: "update",
          icon: "update",
        },
        {
          name: "关于我们",
          path: "about",
          icon: "about",
        },
      ],
    };
  },
  onShow() {
    this.userInfo = getLocalUserInfo();
  },
  onLoad() {},
  methods: {
    back() {
      uni.navigateBack();
    },
    async jump(item) {
      if (item.path == "update") {
        let needUpdate = await needUpdateApp();
        if (needUpdate) {
            console.log('needUpdate',needUpdate)
          this.showUpdateModal = true;
          this.updateInfo = needUpdate;
        } else {
          this.$u.toast("已是最新版本，无需更新~");
        }
        return;
      }
      console.log(item);
      if (item.auth && !this.userInfo?.userId) {
        return uni.navigateTo({
          url: "/pages/login/index",
        });
      }
      uni.navigateTo({
        url: `/pages/mine/setting/${item.path}`,
      });
    },
    logout() {
      uni.removeStorageSync("token");
      uni.removeStorageSync("refreshToken", "");
      uni.removeStorageSync("userInfo", "");
      console.log("logout");
      uni.showToast({
        title: "已退出登录",
        icon: "none",
        duration: 2000,
      });
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common");

.content {
  background: #f7f8ff;
  padding: 32rpx;
  min-height: 100%;
  .setting-item {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    padding: 32rpx;
    .icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 16rpx;
    }
    .right-icon {
      font-weight: bold;
    }
  }
}
</style>
